.nav-box {
	padding: 24rpx;
	display: flex;
	justify-content: space-between;
	background: #fff;
	.item-box {
		padding: 20rpx 0;
		width: 25%;
		text-align: center;
		border-radius: 10rpx;
		overflow: hidden;
		.icon {
			display: block;
			margin: auto;
			padding: 12rpx;
			width: 68rpx;
			height: 68rpx;
			line-height: 68rpx;
			color: #fff;
			font-size: 48rpx;
			border-radius: 68rpx;
			background: #409EFF;
			&.yellow{
				background: #ff852a;
			}
			&.green{
				background: #67c23a;
			}
			&.red{
				background: #f56c6c;
			}
			&.grey{
				background: #909399;
			}
		}
		.title {
			display: block;
			margin-top: 16rpx;
			color: rgba(0,0,0,.6);
			font-size: 28rpx;
			font-weight: bold;
		}
	}
}
.nav-side{
	.head-tit{
		padding: 24rpx 50rpx;
		color: #000;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 48rpx;
		border-top: 2rpx solid #f5f5f5;
		background: #fff;
	}
	.list-box{
		padding: 24rpx 50rpx;
		font-size: 32rpx;
		line-height: 52rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		.icon{
			margin-right: 12rpx;
			color: #999;
		}
		.text{
			color: #333;
		}
	}
}
.floor-box{
	display: flex;
	justify-content: space-between;
	border-radius: 20rpx;
	width: 100%;
	height: 182rpx;
	cursor: pointer;
	overflow: hidden;
	image{
		width: 100%;
	}
}
.swiper-index {
	width: 750rpx;
	height: 421rpx;
	background: #fff;
	.swiper-item{
		display: flex;
		align-items: center;
		image{
			width: 100%;
		}
	}
}
.swiper-focus{
	border-radius: 20rpx;
	overflow: hidden;
	.swiper-box{
		position: relative;
		padding: 24rpx 24rpx 0 24rpx;
		background: #fff;
		.swiper-item{
			display: flex;
			align-items: center;
			width: 100%;
			height: 320rpx;
			border-radius: 20rpx;
			overflow: hidden;
			image{
				width: 100%;
			}
		}
	}
	.focus-box{
		padding: 24rpx 24rpx 0 24rpx;
		background: #fff;
		.img-box{
			display: flex;
			align-items: center;
			position: relative;
			border-radius: 20rpx;
			width: 100%;
			height: 320rpx;
			overflow: hidden;
			.play{
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -43rpx auto auto -43rpx;
				display: block;
				width: 86rpx;
				height: 86rpx;
				color: #fff;
				opacity: 0.3;
				font-size: 86rpx;
				z-index: 1;
			}
			image{
				width: 100%;
			}
		}
		.title{
			display: block;
			padding-top: 24rpx;
			color: #333;
			font-size: 30rpx;
			font-weight: bold;
			line-height: 40rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.meta{
			margin-top: 12rpx;
			line-height: 28rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			text{
				color: #ccc;
				font-size: 20rpx;
				box-sizing: border-box;
				padding-right: 16rpx;
				&.label{
					color: #ff0000;
					font-weight: bold;
				}
				&::before{
					margin-right: 6rpx;
				}
			}
		}
	}
	.txt-box{
		padding: 24rpx;
		margin-bottom: 4rpx;
		background: #fff;
		.title{
			display: block;
			color: #333;
			font-size: 30rpx;
			font-weight: bold;
			line-height: 40rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.meta{
			margin-top: 12rpx;
			line-height: 28rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			text{
				color: #ccc;
				font-size: 20rpx;
				box-sizing: border-box;
				padding-right: 16rpx;
				&.label{
					color: #ff0000;
					font-weight: bold;
				}
				&::before{
					margin-right: 6rpx;
				}
			}
		}
	}
}
.group-box{
	padding: 24rpx 24rpx 0 24rpx;
	&.wrap{
		padding: 24rpx;
	}
	&.tb-0{
		padding: 0 24rpx;
	}
	&.top-0{
		padding: 0 24rpx 24rpx 24rpx;
	}
}
.ntitle{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	line-height: 60rpx;
	.left{
		.h3{
			display: inline-flex;
			position: relative;
			color: #333;
			font-size: 30rpx;
			font-weight: bold;
			&::before{
				content: "";
				display: inline-block;
				margin: auto 8rpx auto 0;
				width: 8rpx;
				height: 30rpx;
				background: rgba($color: #000, $alpha: 0.6);
				border-radius: 0 12rpx 12rpx 0;
				overflow: hidden;
			}
		}
	}
	.right{
		color: #999;
		font-size: 28rpx;
		.more{
			&::after{
				font-style: normal;
				font-family: "iconfont" !important;
				content: "\e68d";
			}
		}
	}
}
.stitle{
	display: block;
	position: relative;
	margin-bottom: 20rpx;
	.title{
		color: #333;
		font-size: 30rpx;
		font-weight: bold;
		height: 40rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		&::before,&::after{
			content: "";
			display: block;
			margin: 0 24rpx;
			width: 25%;
			height: 2rpx;
			border-radius: 2rpx;
			opacity: .3;
		}
		&::before{
			background: linear-gradient(to left,rgba(208,208,208,1),rgba(208,208,208,1),rgba(208,208,208,0));
		}
		&::after{
			background: linear-gradient(to right,rgba(208,208,208,1),rgba(208,208,208,1),rgba(208,208,208,0));
		}
	}
}
.upload-box{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-flow: row wrap;
	margin: 0 -24rpx 2rpx 0;
	padding: 0 24rpx 24rpx 24rpx;
	background: #fff;
	.btn-box{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 24rpx 24rpx 0 0;
		border: 4rpx dotted #ccc;
		width: 145rpx;
		height: 145rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		.icon{
			display: block;
			color: #ccc;
			font-size: 24rpx;
			line-height: 1;
			text-align: center;
			&::before{
				display: block;
				margin-bottom: 12rpx;
				font-size: 48rpx;
			}
		}
	}
	.img-box{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 24rpx 24rpx 0 0;
		width: 145rpx;
		height: 145rpx;
		.close{
			position: absolute;
			right: -18rpx;
			top: -18rpx;
			color: #333;
			font-size: 36rpx;
			background: #fff;
			border-radius: 100%;
			z-index: 1;
		}
		image{
			box-sizing: border-box;
			border: 2rpx solid #ccc;
			border-radius: 12rpx;
			width: 100%;
			overflow: hidden;
		}
	}
}
.sale-wrap{
	.sale-list{
		margin-left: -4rpx;
		white-space: nowrap;
		width: 100%;
		.list-box{
			display: inline-block;
			margin-left: 4rpx;
			padding-bottom: 10px;
			width: 33%;
			border-radius: 20rpx;
			background: #fff;
			overflow: hidden;
			.img-box{
				display: flex;
				align-items: center;
				image{
					width: 100%;
				}
			}
			.txt-box{
				padding: 0 8px;
				color: #333;
				font-size: 28rpx;
				line-height: 40rpx;
				.title{
					display: block;
					padding-top: 20rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.price{
					padding-top: 12rpx;
					color: #FF0000;
					font-size: 28rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					.original{
						margin-left: 4rpx;
						color: #ccc;
						font-size: 24rpx;
						text-decoration: line-through;
					}
				}
			}
		}
	}
}
.img-list{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	border-radius: 20rpx;
	overflow: hidden;
	.list-box{
		margin-top: 4rpx;
		padding-bottom: 20rpx;
		width: 33%;
		background: #fff;
		.img-box{
			display: flex;
			align-items: center;
			image{
				display: block;
				width: 100%;
			}
		}
		.txt-box{
			padding: 0 8px;
			color: #333;
			font-size: 28rpx;
			line-height: 40rpx;
			.title{
				display: block;
				padding-top: 20rpx;
				height: 80rpx;
				overflow: hidden;
			}
			.price{
				padding-top: 12rpx;
				color: #FF0000;
				font-size: 28rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				.sell{
					&::before{
						content: "￥";
						font-size: 24rpx;
					}
				}
				.original{
					margin-left: 4rpx;
					color: #ccc;
					font-size: 24rpx;
					text-decoration: line-through;
					&::before{
						content: "￥";
					}
				}
			}
		}
	}
}
.news-list{
	border-radius: 20rpx;
	overflow: hidden;
	.list-box{
		display: flex;
		justify-content: space-between;
		margin-top: 4rpx;
		padding: 24rpx;
		background: #fff;
		.img-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 208rpx;
			height: 168rpx;
			background: rgba($color: #000, $alpha: 0.05);
			border-radius: 20rpx;
			overflow: hidden;
			image{
				display: block;
				width: 100%;
			}
		}
		.txt-box{
			width: 450rpx;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 0 0 0 20rpx;
			line-height: 40rpx;
			overflow: hidden;
			.title{
				display: block;
				color: #333;
				font-size: 30rpx;
				font-weight: 500;
				line-height: 40rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.note{
				display: block;
				margin-top: 12rpx;
				color: #999;
				font-size: 24rpx;
				line-height: 36rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.meta{
				margin-top: 10rpx;
				line-height: 28rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				text{
					color: #ccc;
					font-size: 20rpx;
					box-sizing: border-box;
					padding-right: 16rpx;
					&::before{
						margin-right: 6rpx;
					}
				}
			}
		}
	}
	.txt-box{
		margin-bottom: 4rpx;
		padding: 24rpx;
		background: #fff;
		.title{
			display: block;
			color: #333;
			font-size: 30rpx;
			font-weight: bold;
			line-height: 48rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.meta{
			margin-top: 12rpx;
			line-height: 28rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			text{
				color: #ccc;
				font-size: 20rpx;
				box-sizing: border-box;
				padding-right: 16rpx;
				&.label{
					color: #ff0000;
				}
				&::before{
					margin-right: 6rpx;
				}
			}
		}
	}
}
.cate-top-wrap{
	padding: 24rpx 24rpx 0 24rpx;
	.cate-top-box{
		display: flex;
		justify-content: space-between;
		flex-flow: row wrap;
		border-radius: 20rpx;
		overflow: hidden;
		.item-box{
			flex-grow: 1;
			width: 24%;
			height: 80rpx;
			background: #fff;
			margin: 2rpx 0 0 2rpx;
			text{
				display: block;
				text-align: center;
				color: rgba($color: #333, $alpha: 0.8);
				font-size: 28rpx;
				font-weight: bold;
				line-height: 80rpx;
			}
		}
	}
}
.cate-nav-wrap{
	height: 84rpx;
	.cate-nav-box{
		position: fixed;
		left: 0;
		right: 0;
		height: 84rpx;
		padding: 0 14rpx;
		background: linear-gradient(to bottom, #fff , #fafafa);
		z-index: 1;
		box-shadow: 0 0 20rpx rgba($color: #000, $alpha: 0.05);
		overflow: hidden;
		.cate-box{
			width: 662rpx;
		}
		.btn{
			position: absolute;
			top: 0;
			right: 0;
			z-index: 11;
			display: block;
			width: 80rpx;
			height: 84rpx;
			color: #333;
			font-size: 32rpx;
			text-align: center;
			line-height: 84rpx;
			box-shadow: 0 0 36px #fff;
			background: #fff;
		}
	}
}
.cate-item-list{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	background: #fff;
	margin: 0 -24rpx 24rpx -24rpx;
	padding: 24rpx 24rpx 0 24rpx;
	border-radius: 0;
	.list-box{
		margin-bottom: 20rpx;
		width: 30%;
		text{
			display: block;
			padding: 0 16rpx;
			background: #f5f5f5;
			text-align: center;
			border: 2rpx solid #F2F6FC;
			color: #333;
			font-size: 26rpx;
			line-height: 56rpx;
			border-radius: 56rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			&.active{
				border-color: #409EFF;
				color: #fff;
				background: #409EFF;
			}
		}
	}
	.price-box{
		margin-bottom: 20rpx;
		width: 40%;
		input{
			padding: 0 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 60rpx;
			color: #333;
			font-size: 24rpx;
			text-align: center;
			background: #f5f5f5;
		}
	}
	.line{
		width: 20%;
		color: #999;
		text-align: center;
	}
}
.cate-btn-wrap{
	height: 112rpx;
	.btn-box{
		display: flex;
		justify-content: space-between;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx 24rpx;
		height: 72rpx;
		background: #fff;
		button{
			width: 46%;
			font-size: 28rpx;
			border-radius: 72rpx;
			&::after{
				border-radius: 72rpx;
			}
		}
	}
}
.content-box{
	border-radius: 20rpx;
	overflow: hidden;
	.title{
		margin-bottom: 4rpx;
		padding: 24rpx;
		background: #fff;
		.h1{
			color: #333;
			font-size: 40rpx;
			line-height: 60rpx;
		}
		.h2{
			color: #333;
			font-size: 34rpx;
			line-height: 48rpx;
		}
		.meta{
			margin-top: 10rpx;
			line-height: 28rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			text{
				color: #ccc;
				font-size: 20rpx;
				box-sizing: border-box;
				padding-right: 16rpx;
				&::before{
					margin-right: 6rpx;
				}
			}
		}
	}
	.album{
		margin-bottom: -24rpx;
		background: #fff;
		.list-box{
			position: relative;
			margin-bottom: 24rpx;
			.img-box{
				image{
					display: block;
					width: 100%;
				}
			}
			.remark{
				display: block;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				padding: 24rpx 20rpx;
				color: rgba($color: #fff, $alpha: 0.8);
				font-size: 28rpx;
				line-height: 40rpx;
				text-align: center;
				background: rgba($color: #000, $alpha: 0.1);
			}
		}
		
	}
	.content{
		color: #333;
		font-size: 30rpx;
		line-height: 60rpx;
		padding: 24rpx;
		background: #fff;
		img{
			width: 100%;
		}
		image{
			width: 100%;
		}
	}
	.items{
		display: flex;
		justify-content: space-between;
		margin-bottom: 4rpx;
		padding: 0 24rpx;
		background: #fff;
		.item{
			color: #666;
			font-size: 28rpx;
			line-height: 84rpx;
			&::before{
				margin-right: 6rpx;
			}
		}
	}
}
.comment-list{
	border-radius: 20rpx;
	overflow: hidden;
	.nodata{
		color: #999;
		font-size: 28rpx;
		text-align: center;
		padding: 24rpx;
		background: #fff;
	}
	.list-box{
		margin-bottom: 4rpx;
		padding: 24rpx;
		background: #fff;
		.head-box{
			display: flex;
			justify-content: space-between;
			line-height: 66rpx;
			.left{
				display: flex;
				justify-content: flex-start;
				.img-box{
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: #f7f8fa;
					width: 66rpx;
					height: 66rpx;
					border-radius: 66rpx;
					overflow: hidden;
					image{
						width: 100%;
					}
				}
				.meta{
					margin-left: 20rpx;
					text{
						display: block;
						color: #333;
						font-size: 26rpx;
						line-height: 34rpx;
						&.time{
							margin-top: 10rpx;
							color: #999;
							font-size: 20rpx;
							line-height: 20rpx;
						}
					}
				}
			}
			.right{
				line-height: 36rpx;
				text{
					padding: 6rpx 12rpx;
					color: #999;
					font-size: 24rpx;
					line-height: 24rpx;
					&.active{
						color: #448aff;
					}
					&::before{
						margin-right: 6rpx;
					}
				}
			}
			.star{
				text{
					margin: 0 6rpx;
					color: #999;
					font-size: 28rpx !important;
				}
				.icon-star-full{
					color: #ff722b;
				}
			}
		}
		.content{
			margin: 24rpx 0 0 86rpx;
			color: #333;
			font-size: 28rpx;
			line-height: 40rpx;
		}
		.album-box{
			display: flex;
			justify-content: flex-start;
			flex-flow: row wrap;
			margin: 14rpx 0 0 76rpx;
			.img-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 10rpx 0 0 10rpx;
				background: #f7f8fa;
				width: 135rpx;
				height: 135rpx;
				box-sizing: border-box;
				border: 2rpx solid #f7f8fa;
				border-radius: 10rpx;
				overflow: hidden;
				image{
					width: 100%;
				}
			}
		}
		.reply{
			margin: 24rpx 0 0 86rpx;
			padding: 24rpx;
			border-radius: 10rpx;
			color: #666;
			font-size: 28rpx;
			line-height: 40rpx;
			background: #f7f8fa;
			overflow: hidden;
			.meta{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					color: #ccc;
					font-size: 24rpx;
				}
				.right{
					.icon{
						margin-left: 20rpx;
						color: #999;
						font-size: 24rpx;
						&::before{
							margin-right: 6rpx;
						}
					}
				}
			}
			text{
				&.label{
					margin-right: 6rpx;
					color: #999;
				}
			}
		}
		.remark{
			display: flex;
			justify-content: space-between;
			margin: 24rpx 0 0 86rpx;
			color: #999;
			font-size: 24rpx;
			line-height: 36rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
}
.comment-foot{
	position: relative;
	margin-top: 20rpx;
	height: 96rpx;
	.foot-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 24rpx;
		border-top: 2rpx solid #fafafa;
		height: 96rpx;
		background: #fff;
		z-index: 1;
		box-shadow: 0 0 20rpx #fff;
		overflow: hidden;
		.left{
			width: 50%;
			.btn{
				display: block;
				color: #878787;
				font-size: 28rpx;
				padding: 20rpx 34rpx;
				line-height: 28rpx;
				border-radius: 36rpx;
				background: #f6f7f9;
				&::before{
					margin-right: 6rpx;
				}
			}
		}
		.right{
			line-height: 28rpx;
			.btn{
				margin-left: 24rpx;
				padding: 10rpx 0;
				color: #333;
				font-size: 28rpx;
				&::before{
					margin-right: 6rpx;
				}
			}
		}
	}
}
.comment-form{
	padding: 24rpx 24rpx 0 24rpx;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	overflow: hidden;
	.form-item{
		padding-bottom: 24rpx;
		.input{
			display: block;
			padding: 24rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			width: 100%;
			height: 160rpx;
			color: #333;
			font-size: 28rpx;
			background: #f7f7f7;
		}
		.btn{
			display: block;
			padding: 24rpx 30rpx;
			color: #333;
			font-size: 28rpx;
			line-height: 1;
			border-radius: 20rpx;
			&.submit{
				color: #fff;
				background: #2ad181;
			}
			&::after{
				border: 0;
			}
		}
		
	}
}
.item-list{
	border-radius: 20rpx;
	overflow: hidden;
	.list-box{
		display: flex;
		justify-content: space-between;
		padding: 24rpx;
		margin-bottom: 2rpx;
		color: #999;
		font-size: 26rpx;
		line-height: 48rpx;
		background: #fff;
		.title{
			flex-shrink: 0;
			margin-right: 20rpx;
			width: 20%;
		}
		.icon{
			margin-right: 16rpx;
			font-size: 28rpx;
			&.big{
				font-size: 36rpx;
			}
			&.blue{
				color: #9789f7;
			}
			&.red{
				color: #e07472;
			}
			&.green{
				color: #5fcda2;
			}
			&.orange{
				color: #ee883b;
			}
		}
		.remark{
			flex-grow: 1;
			position: relative;
			box-sizing: border-box;
			color: #333;
			&.opt{
				padding-right: 28rpx;
				&:after{
					color: #666;
					font-size: 28rpx !important;
					font-family: "iconfont";
					content: "\e68d";
					position: absolute;
					top: 50%;
					right: 0;
					margin-top: -14rpx;
					width: 28rpx;
					height: 28rpx;
					line-height: 28rpx;
				}
			}
			&.right{
				text-align: right;
			}
			.price{
				color: #fa436a;
			}
			.bold{
				font-weight: bold;
			}
			.input{
				color: #333;
				font-size: 28rpx;
				height: 48rpx;
			}
			.txt{
				display: block;
			}
		}
	}
}
.form-list{
	border-radius: 20rpx;
	overflow: hidden;
	.list-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		margin-bottom: 2rpx;
		color: #999;
		font-size: 28rpx;
		line-height: 64rpx;
		background: #fff;
		.title{
			width: 20%;
			color: #666;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.remark{
			position: relative;
			box-sizing: border-box;
			width: 80%;
			color: #333;
			&.opt{
				padding-right: 28rpx;
				&::after{
					color: #999;
					font-size: 28rpx !important;
					font-family: "iconfont";
					content: "\e68d";
					position: absolute;
					top: 50%;
					right: 0;
					margin-top: -14rpx;
					width: 28rpx;
					height: 28rpx;
					line-height: 28rpx;
				}
			}
			&.right{
				text-align: right;
			}
			.input{
				color: #333;
				font-size: 28rpx;
				height: 44rpx;
			}
			.textarea{
				display: block;
				box-sizing: border-box;
				padding: 12rpx;
				width: auto;
				height: 160rpx;
				color: #999;
				font-size: 28rpx;
				line-height: 44rpx;
				box-shadow: 12rpx;
			}
		}
		&.block{
			flex-direction: column;
			.title{
				width: 100%;
			}
			.remark{
				width: 100%;
			}
		}
	}
}
.form-foot{
	position: sticky;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 1rpx;
	.btn{
		display: block;
		margin-bottom: 24rpx;
		width: 100%;
		height: 76rpx;
		line-height: 76rpx;
		color: #333;
		font-size: 28rpx;
		text-align: center;
		border-radius: 76rpx;
		&::after{
			border-radius: 76rpx;
		}
		&.submit{
			color: #fff;
			font-size: 28rpx;
			background: #ff5000;
		}
	}
}
.form-uni-list{
	padding: 24rpx 24rpx 0 24rpx !important;
	border-radius: 20rpx;
	background: #fff;
	.uni-forms-item__label{
		color: #999 !important;
	}
	.text{
		line-height: 72rpx;
	}
}
.cart-list{
	.nodata{
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -300rpx auto auto -150rpx; 
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		.icon{
			color: #ebebeb;
			font-size: 300rpx;
		}
		.text{
			margin-top: 24rpx;
			color: #ccc;
			font-size: 30rpx;
			line-height: 48rpx;
		}
	}
	.list-wrap{
		margin-bottom: 24rpx;
		border-radius: 20rpx;
		background: #fff;
		overflow: hidden;
		.list-head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			.left{
				flex-grow: 1;
				display: flex;
				align-items: center;
				position: relative;
				overflow: hidden;
				.btn-check{
					margin-right: 12rpx;
					color: #C0C4CC;
					font-size: 40rpx;
					border-radius: 100%;
					background: #fff;
					&.checked{
						color: #fa436a;
					}
				}
				.title{
					line-height: 48rpx;
					font-size: 28rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					.label{
						display: inline-block;
						margin-right: 8rpx;
						padding: 6rpx;
						color: #fff;
						font-size: 20rpx;
						line-height: 1em;
						background: #ff0000;
						border-radius: 6rpx;
						vertical-align: middle;
					}
				}
			}
			.right{
				flex-shrink: 0;
				.label{
					display: block;
					padding: 12rpx 16rpx;
					color: #f2270c;
					font-size: 20rpx;
					line-height: 24rpx;
					border-radius: 8rpx;
					background: #fcedeb;
				}
			}
		}
		.list-box{
			display: flex;
			justify-content: space-between;
			position: relative;
			margin-bottom: 4rpx;
			padding: 30rpx;
			.left{
				position: relative;
				.img-box{
					display: flex;
					align-items: center;
					width: 180rpx;
					height: 180rpx;
					background: #f5f5f5;
					border-radius: 10rpx;
					overflow: hidden;
					image{
						width: 100%;
					}
				}
				.btn-check{
					position: absolute;
					top: -8rpx;
					left: -8rpx;
					padding: 2rpx;
					color: #C0C4CC;
					font-size: 40rpx;
					border-radius: 100%;
					background: #fff;
					&.checked{
						color: #fa436a;
					}
				}
			}
			.right{
				flex-grow: 1;
				position: relative;
				padding: 0 34rpx 0 24rpx;
				.title{
					display: block;
					color: #333;
					font-size: 26rpx;
					line-height: 36rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.attr{
					display: block;
					margin-top: 20rpx;
					color: #909399;
					font-size: 26rpx;
					line-height: 1;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.num-box{
					position: absolute;
					left: 24rpx;
					right: 0;
					bottom: 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 40rpx;
					.price{
						display: block;
						color: #ff5000;
						font-size: 30rpx;
						font-weight: bold;
						line-height: 1;
						&::before{
							content: "￥";
							font-size: 20rpx;
							font-weight: 500;
						}
					}
					.number{
						color: #666;
						font-size: 28rpx;
					}
				}
			}
			.btn-del{
				position: absolute;
				top: 24rpx;
				right: 20rpx;
				padding: 6rpx;
				color: #ccc;
				font-size: 34rpx;
				line-height: 1;
				border-radius: 100%;
			}
		}
		.list-foot{
			.item-box{
				display: flex;
				justify-content: space-between;
				padding: 24rpx;
				color: #999;
				font-size: 26rpx;
				line-height: 48rpx;
				.title{
					flex-shrink: 0;
					margin-right: 20rpx;
					width: 20%;
				}
				.remark{
					flex-grow: 1;
					position: relative;
					box-sizing: border-box;
					color: #333;
					&.opt{
						padding-right: 28rpx;
						&:after{
							color: #666;
							font-size: 28rpx !important;
							font-family: "iconfont";
							content: "\e68d";
							position: absolute;
							top: 50%;
							right: 0;
							margin-top: -14rpx;
							width: 28rpx;
							height: 28rpx;
							line-height: 28rpx;
						}
					}
				}
			}
		}
	}
}
.goods-title{
	padding: 24rpx;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	.title{
		display: block;
		color: #333;
		font-size: 36rpx;
		line-height: 50rpx;
	}
	.subtitle{
		display: block;
		margin-top: 12rpx;
		color: #999;
		font-size: 24rpx;
		line-height: 30rpx;
	}
	.price{
		padding-top: 12rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		line-height: 64rpx;
		.sale{
			color: #ff0000;
			font-size: 36rpx;
			vertical-align: middle;
			&:before{
				content: "￥";
				font-size: 24rpx;
			}
		}
		.original{
			margin-left: 8rpx;
			color: #ccc;
			font-size: 28rpx;
			text-decoration: line-through;
			vertical-align: bottom;
			&:before{
				content: "￥";
				font-size: 24rpx;
			}
		}
		.tip{
			margin-left: 12rpx;
			padding: 2rpx 8rpx;
			background: #fa436a;
			color: #fff;
			font-size: 20rpx;
			border-radius: 6rpx;
			line-height: 20rpx;
			transform: translateY(-4rpx);
			vertical-align: middle;
		}
	}
	.point{
		padding-top: 12rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		line-height: 64rpx;
		.text{
			color: #999;
			font-size: 28rpx;
		}
		.sale{
			color: #ff0000;
			font-size: 36rpx;
			&::before{
				font-style: normal;
				font-family: "iconfont" !important;
				content: "\e606";
				color: #f90;
				font-size: 28rpx;
			}
		}
		.original{
			margin-left: 6rpx;
			color: #ccc;
			font-size: 28rpx;
			text-decoration: line-through;
			&::before{
				content: "￥";
				font-size: 24rpx;
			}
		}
		.tip{
			margin-left: 12rpx;
			padding: 2rpx 8rpx;
			background: #fa436a;
			color: #fff;
			font-size: 20rpx;
			border-radius: 6rpx;
			line-height: 20rpx;
			transform: translateY(-4rpx);
		}
	}
	.time{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 12rpx;
		color: #999;
		font-size: 28rpx;
		line-height: 40rpx;
	}
	.label-box{
		padding-top: 20rpx;
		.label{
			color: #333;
			font-size: 20rpx;
			line-height: 38rpx;
			.tip{
				margin-right: 20rpx;
				color: #999;
			}
		}
	}
	.info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 12rpx;
		color: #999;
		font-size: 28rpx;
		line-height: 40rpx;
	}
}
.goods-detail{
	margin: 0 -24rpx;
	padding-top: 20rpx;
	.content{
		color: #333;
		font-size: 30rpx;
		line-height: 48rpx;
		text{
			display: block;
			padding: 0 24rpx 24rpx;
		}
		img{
			display: block;
			width: 100%;
		}
		image{
			display: block;
			width: 100%;
		}
	}
}
.goods-bar{
	height: 50px;
	.foot-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 50px;
		border-top: 1px solid rgba($color: #000, $alpha: 0.05);
		background: #fff;
		.left{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.icon{
				color: #666;
				font-size: 10px;
				line-height: 1;
				width: 96rpx;
				text-align: center;
				&::before{
					display: block;
					margin-bottom: 5px;
					font-size: 20px;
				}
				&.active{
					color: #f84432;
				}
			}
		}
		.right{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-right: 5px;
			height: 36px;
			border-radius: 36px;
			overflow: hidden;
			.btn{
				padding: 5px 20px;
				color: #ccc;
				font-size: 14px;
				line-height: 26px;
				background: #f2f2f2;
				&.yellow{
					color: #fff;
					background: #ff722c;
				}
				&.red{
					color: #fff;
					background: #f63434;
				}
			}
		}
	}
}
.goods-list{
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
	.list-box{
		margin-bottom: 24rpx;
		width: calc(50% - 12rpx);
		border-radius: 20rpx;
		background: #fff;
		overflow: hidden;
		.img-box{
			display: flex;
			align-items: center;
			image{
				width: 100%;
			}
		}
		.txt-box{
			padding: 0 24rpx 24rpx 24rpx;
			color: #333;
			font-size: 28rpx;
			line-height: 40rpx;
			.title{
				display: block;
				padding-top: 20rpx;
				height: 80rpx;
				overflow: hidden;
			}
			.price{
				padding-top: 12rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				.sell{
					color: #ff0000;
					font-size: 34rpx;
					&::before{
						content: "￥";
						font-size: 24rpx;
					}
				}
				.original{
					margin-left: 6rpx;
					color: #ccc;
					font-size: 28rpx;
					text-decoration: line-through;
					&::before{
						content: "￥";
						font-size: 24rpx;
					}
				}
			}
			.point{
				padding-top: 12rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				padding-top: 12rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				.sell{
					font-family: '';
					color: #ff0000;
					font-size: 34rpx;
					&::before{
						font-style: normal;
						font-family: "iconfont" !important;
						content: "\e606";
						color: #f90;
						font-size: 28rpx;
					}
				}
				.original{
					margin-left: 6rpx;
					color: #ccc;
					font-size: 28rpx;
					text-decoration: line-through;
					&::before{
						content: "￥";
						font-size: 24rpx;
					}
				}
			}
		}
	}
}
.goods-ticket{
	box-sizing: border-box;
	padding: 24rpx;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	.nodata{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 24rpx 0;
		height: 120rpx;
		color: #ddd;
		font-size: 24rpx;
		text-align: center;
		border-radius: 20rpx;
		background: #f9f9f9;
	}
	.list-wrap{
		margin: -24rpx 0 24rpx;
		max-height: calc(100vh - 450rpx);
		.list-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			margin-top: 24rpx;
			padding: 28rpx;
			/*border: 2rpx solid rgba($color: #ff5500, $alpha: 0.1);*/
			border-radius: 20rpx;
			background: rgba($color: #ff5500, $alpha: 0.05);
			&:before{
				content: "";
				display: block;
				position: absolute;
				top: 50%;
				left: -30rpx;
				margin-top: -20rpx;
				width: 40rpx;
				height: 40rpx;
				background: #fff;
				/*border: 2rpx solid rgba($color: #ff5500, $alpha: 0.1);*/
				border-radius: 40rpx;
				overflow: hidden;
			}
			.left{
				.price{
					color: #ff5500;
					font-size: 48rpx;
					font-weight: bold;
					&::before{
						content: "￥";
						font-size: 28rpx;
						font-weight: 500;
					}
				}
			}
			.center{
				flex-grow: 1;
				padding: 0 24rpx;
				line-height: 40rpx;
				overflow: hidden;
				.title{
					display: block;
					color: #333;
					font-size: 28rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					.label{
						position: relative;
						display: inline-block;
						margin-right: 6rpx;
						padding: 0 8rpx;
						color: #fff;
						font-size: 20rpx;
						height: 32rpx;
						line-height: 32rpx;
						background: #f03446;
						border-radius: 6rpx;
					}
					.text{
						vertical-align: middle;
					}
				}
				.time{
					display: block;
					padding-top: 6rpx;
					color: #999;
					font-size: 24rpx;
				}
			}
			.right{
				.btn{
					padding: 20rpx 0 20rpx 20rpx;
					color: #ff5500;
					font-size: 30rpx;
					font-weight: 600;
					border-left: 2rpx dotted rgba($color: #ff5500, $alpha: 0.3);
					white-space: nowrap;
					text-overflow: ellipsis;
					&.active{
						color: #ccc;
						font-weight: normal;
					}
				}
			}
		}
	}
	.foot-box{
		.btn{
			padding: 24rpx 30rpx;
			color: #fff;
			font-size: 28rpx;
			line-height: 1;
			border-radius: 50rpx;
			background: #ff5000;
			&::after{
				border: none;
			}
		}
	}
}
.promo-list{
	.list-box{
		display: flex;
		justify-content: flex-start;
		margin-bottom: 24rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		background: #fff;
		.img-box{
			flex-shrink: 0;
			display: flex;
			align-items: center;
			width: 168rpx;
			height: 168rpx;
			background-color: #f5f5f5;
			image{
				width: 100%;
			}
		}
		.info{
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			position: relative;
			margin-left: 24rpx;
			width: calc(100% - 216rpx);
			.title{
				display: block;
				width: 100%;
				color: #333;
				font-size: 30rpx;
				line-height: 1;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.time-box{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 10rpx;
				color: #999;
				font-size: 24rpx;
				line-height: 40rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.price-box{
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				line-height: 1;
				.price{
					color: #f03446;
					font-size: 32rpx;
					&::before{
						content: "￥";
						font-size: 24rpx;
					}
				}
				.original{
					margin-left: 8rpx;
					color: #ccc;
					font-size: 24rpx;
					text-decoration: line-through;
					&::before{
						content: "￥";
						font-size: 24rpx;
					}
				}
				.label{
					position: relative;
					display: inline-block;
					margin-left: 20rpx;
					padding: 0 2rpx;
					height: 30rpx;
					line-height: 30rpx;
					color: #fff;
					font-size: 20rpx;
					background: #f03446;
					border-radius: 4rpx 4rpx 4rpx 0;
					&::after{
						content: "";
						position: absolute;
						bottom: -4rpx;
						left: 0;
						width: 0;
						height: 0;
						border-color: transparent transparent transparent #f03446;
						border-style: solid;
						border-width: 8rpx;
					}
					
				}
			}
		}
	}
}
.login-head-box{
	padding: 80rpx 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	.title{
		color: #333;
		font-size: 48rpx;
	}
}
.login-head-tab{
	padding: 0 60rpx 32rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.text-box{
		flex-grow: 1;
		color: #999;
		font-size: 30rpx;
		line-height: 48rpx;
		text-align: center;
		&.active{
			color: #333;
		}
		&.line{
			position: relative;
			&::after{
				position: absolute;
				top: 50%;
				right: 0;
				background: rgba(0,0,0,.1);
				content: " ";
				display: block;
				height: 24rpx;
				margin-top: -12rpx;
				width: 2rpx;
			}
		}
	}
}
.login-form-list{
	padding: 0 60rpx;
	.item-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		.left{
			flex-grow: 1;
		}
		.right{
			margin-left: 24rpx;
		}
		.send{
			display: block;
			padding: 0 30rpx;
			min-width: 100rpx;
			color: #fff;
			font-size: 28rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			border-radius: 10rpx;
			background: #67C23A;
			white-space: nowrap;
			&.gray{
				color: #ccc;
				background: #f5f5f5;
			}
		}
		.code{
			display: flex;
			align-items: center;
			margin-left: 24rpx;
			width: 180rpx;
			height: 84rpx;
			border-radius: 10rpx;
			background: #f5f5f5;
			image{
				width: 100%;
			}
		}
		.input{
			box-sizing: border-box;
			width: 100%;
			padding: 0 30rpx;
			color: #333;
			font-size: 28rpx;
			height: 84rpx;
			line-height: 84rpx;
			border-radius: 10rpx;
			background: #f5f5f5;
		}
	}
	.agree-box{
		color: #666;
		font-size: 28rpx;
		line-height: 56rpx;
		.link{
			margin-left: 10rpx;
			color: #2ad181;
		}
	}
	.btn-box{
		padding-top: 50rpx;
		.btn{
			display: block;
			margin-bottom: 24rpx;
			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			border-radius: 10rpx;
			color: #4399fc;
			font-size: 26rpx;
			text-align: center;
			&.submit{
				color: #fff;
				font-size: 30rpx;
				background: #67C23A;
			}
		}
	}
}
.login-foot-box{
	position: absolute;
	left: 60rpx;
	right: 60rpx;
	bottom: 50rpx;
	text-align: center;
	color: #666;
	font-size: 28rpx;
	line-height: 36rpx;
	.link{
		display: inline-block;
		margin-left: 10rpx;
		color: #4399fc;
	}
}
.record-head{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 200rpx;
	background: linear-gradient(#fe3b0f, #fc603a);
	border-radius: 0 0 20rpx 20rpx;
	.number{
		color: #fff;
		font-size: 54rpx;
	}
	.title{
		margin-top: 10rpx;
		color: #fff;
		font-size: 30rpx;
		.icon{
			margin-right: 6rpx;
			font-size: 30rpx;
		}
	}
}
.record-list{
	border-radius: 20rpx;
	overflow: hidden;
	.list-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2rpx;
		padding: 24rpx;
		background: #fff;
		width: 100%;
		box-sizing: border-box;
		.left{
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			.title{
				color: #333;
				font-size: 28rpx;
				line-height: 40rpx;
			}
			.date{
				margin-top: 20rpx;
				color: #999;
				font-size: 24rpx;
				line-height: 1;
			}
		}
		.right{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 24rpx;
			.text{
				color: #fe3b0f;
				font-size: 28rpx;
				font-weight: bold;
			}
			.btn{
				margin-left: 24rpx;
				padding: 8rpx 16rpx;
				color: #fe3b0f;
				font-size: 24rpx;
				line-height: 32rpx;
				border: 2rpx solid #fe3b0f;
				border-radius: 10rpx;
				&.gray{
					color: #ccc;
					border: none;
				}
			}
		}
	}
	.list-btn{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 4rpx;
		padding: 0 30rpx;
		background: #ff0000;
		&.gray{
			background: #f0f0f0;
		}
		.icon{
			color: #fff;
			font-size: 40rpx;
		}
	}
}
.footer{
	margin: 24rpx 0 4rpx;
	padding: 20rpx 24rpx;
	text-align: center;
	color: #999;
	font-size: 24rpx;
	line-height: 40rpx;
	background: #fff;
	.link-list{
		display: flex;
		justify-content: center;
		align-items: center;
		.line{
			display: inline-block;
			margin: 24rpx 10rpx;
			width: 4rpx;
			height: 20rpx;
			background: rgba($color: #d0d0d0, $alpha: 0.3);
		}
		navigator{
			display: inline-block;
			padding: 10rpx 20rpx;
			color: #666;
			font-size: 28rpx;
			line-height: 48rpx;
			border-radius: 10rpx;
			overflow: hidden;
		}
	}
	.copyright{
		margin: 10rpx 0 24rpx;
		font-size: 24rpx;
	}
}